import React, { Component } from 'react';
import { array } from 'prop-types';
import Image from 'react-uwp/Image';

export default class Recommend extends Component {
  // static propTypes = {
  //     recommendList: array.isRequired
  // };
  recommendItem(item, index) {
    let style = {};
    if (index < 3) {
      style = { width: '15.2rem', height: '10.16rem' };
    } else if (index == 3) {
      style = { width: '15.2rem', height: '15.2rem' };
    } else {
      style = { width: '31.6rem', height: '15.2rem' };
    }
    Object.assign(style, {
      position: 'relative',
      overflow: 'hidden',
      marginBottom: '1.2rem'
    });
    return (
      <div style={style} className="recomdItem">
        <Image
          useLazyLoad
          offset={100}
          src={item.url}
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          className="recomdImg"
        />
        <div className="dfcc wh100 recomdInfo">
          <div className="mask" />
          <div className=" wh100 recomdText">
            <span className="f24 cff" style={{ padding: '0.4rem' }}>
              {item.title}
            </span>
            <div>
              <small className="cmain">￥</small>
              <span className="cmain f16">{item.price}</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
  render() {
    let { recommendList } = this.props;
    return (
      <div className="dfc">
        <div className="dfrcb">
          {recommendList
            .slice(0, 3)
            .map((item, index) => this.recommendItem(item, index))}
        </div>
        <div className="dfrcb">
          {recommendList.length > 3
            ? recommendList
                .slice(3, 5)
                .map((item, index) => this.recommendItem(item, index + 3))
            : null}
        </div>
      </div>
    );
  }
}
